<template>
  <div class="resume-basic__box">
    <div class="avatar-box">
      <img :src="avatarUrl" alt="" />
    </div>
    <div class="basic-info">
      <h3>
        <template v-if="detail?.name">
          {{ detail.name }}
        </template>
        <span
          class="circle"
          v-if="GET_CURRENT_JOB_STATE_DICT_TEXT(detail?.currentState)"
          >{{ GET_CURRENT_JOB_STATE_DICT_TEXT(detail?.currentState) }}</span
        >
      </h3>
      <p class="call">
        <svg-icon name="dianhua" />{{ detail?.phoneNumber }}
        <template v-if="detail?.email">
          <svg-icon name="email" style="margin-left: 42px" />{{
            detail?.email
          }}
        </template>
      </p>
      <ul class="des">
        <svg-icon name="zhiweiqingkuang" />
        <template v-if="des.length">
          <li v-for="(item, index) in des" :key="index">
            <span class="text"> {{ item }}</span>
            <span class="line">·</span>
          </li>
        </template>
        <li v-else>暂无</li>
      </ul>
      <div class="tags" v-if="tags.length">
        <div v-for="(item, index) in tags" :key="index">{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { TypeSelectSeekerBaseInfoResp } from '../type';
import manAvatarSrc from '@/assets/images/avatar-man.png';
import womanAvatarSrc from '@/assets/images/avatar-woman.png';
import ResumeService from '@/api/resume';
import { GET_CURRENT_JOB_STATE_DICT_TEXT } from '@/utils/dict';
import { useMitt } from '@/hooks/useMitt';

const detail = ref<TypeSelectSeekerBaseInfoResp>();

useMitt('RESUME_UPDATE', fetchPageData);

const des = computed(() => {
  const res: any = [];
  const value = detail.value;
  if (value?.lastPositionName) {
    res.push(value.lastPositionName);
  }
  if (value?.lastCompanyName) {
    res.push(value.lastCompanyName);
  }
  return res;
});

const tags = computed(() => {
  const data = detail.value;
  const workYears = data?.workStartYear
    ? new Date().getFullYear() - data.workStartYear + '年工作经验'
    : null;
  return [
    data?.genderEnumLabel || null,
    data?.currentAreaName || null,
    data?.age ? data.age + '岁' : null,
    data?.degreeName || null,
    workYears,
  ].filter(t => {
    if (t) return t;
  });
});

const gender = computed(() => {
  const data = detail.value;
  return data?.genderEnumLabel;
});

const avatarUrl = computed(() => {
  const url = detail.value?.avatarUrlPreview;
  return url ? url : gender.value === '男' ? manAvatarSrc : womanAvatarSrc;
});

async function fetchPageData() {
  try {
    const resp =
      await ResumeService.selectSeekerBaseInfo<TypeSelectSeekerBaseInfoResp>();
    if (resp.code === 200) {
      detail.value = resp.data;
    }
  } catch (error) {
    console.log(error);
  }
}

fetchPageData();
</script>
<style lang="less" scoped>
.resume-basic__box {
  height: 184px;
  box-sizing: border-box;
  padding: 32px;
  display: flex;
  margin-bottom: 24px;
  background: linear-gradient(158deg, #3c83fe 0%, #006efe 100%);
  border-radius: 8px;
   box-shadow: 0 1px 10px 0 #d0cbcc7a;
  .avatar-box {
    width: 100px;
    height: 120px;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.65);
    margin-right: 27px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .basic-info {
    h3,
    p,
    ul,
    li {
      padding: 0;
      margin: 0;
    }

    ul,
    li {
      list-style: none;
    }

    h3 {
      font-size: 24px;
      font-family: AlibabaPuHuiTi_2_85_Bold;
      color: #ffffff;
      line-height: 24px;
      margin-bottom: 16px;
      display: flex;
      .circle {
        display: block;
        margin-left: 16px;
        height: 27px;
        border-radius: 14px;
        box-sizing: border-box;
        border: 1px solid #ffffff;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 25px;
        text-align: center;
        padding: 0 16px;
        font-size: 16px;
      }
      .tag {
        width: 98px;
        height: 22px;
        background: #def2db;
        border-radius: 2px;
        text-align: center;
        line-height: 22px;
        margin-left: 12px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #113a13;
        margin-top: 2px;
      }
    }

    .call {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 16px;
      margin-bottom: 13px;
      cursor: pointer;
      &.text {
        cursor: text;
      }
      :deep(.svg-icon) {
        margin-right: 8px;
      }
    }

    .des {
      :deep(.svg-icon) {
        margin-right: 8px;
      }
      display: flex;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 16px;
      margin-bottom: 13px;
      li {
        position: relative;
        .line {
          margin: 0 8px;
        }
        &:last-child {
          .line {
            display: none;
          }
        }
      }
    }

    .tags {
      display: flex;
      height: 22px;
      div {
        border-radius: 2px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;

        line-height: 22px;
        text-align: center;
        box-sizing: border-box;
        padding: 0 8px;

        margin-right: 10px;
        &:nth-child(1) {
          background-color: #eef2fc;
          color: #141c37;
        }
        &:nth-child(2) {
          color: #113a13;
          background: #faefd6;
        }
        &:nth-child(3) {
          background-color: #dff3f4;
          color: #08322f;
        }
        &:nth-child(4) {
          background-color: #e3e3f9;
          color: #0d054c;
        }
        &:last-child {
          background-color: #def2db;
          color: #113a13;
          margin-right: 0;
        }
      }
    }
  }
  .right-info {
    float: right;
    margin-left: auto;
    padding-right: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .btns {
      display: flex;
      margin-bottom: 21px;
      :deep(.ant-btn) {
        width: 124px;
        height: 40px;
        background: #ffffff;
        border: 0 none;
        color: #6285ff;
        &:first-child {
          margin-right: 24px;
        }
      }
    }
    .text {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 14px;
      cursor: pointer;
    }
  }
}
</style>
